<!-- 报名详情 -->
<script setup lang="ts">
import { fetchRegistrationDetailAPI } from '@/apis/fetchRegistrationDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

// 报名详情数据
const registration = ref<RegistrationDetail | null>(null)
// 是否处于加载中状态
const loading = ref(false)

onLoad(async (options) => {
  if (options && options.id) {
    try {
      loading.value = true
      const res = await fetchRegistrationDetailAPI(
        options.id,
        userInfoStore.userInfo!.token!,
      )
      loading.value = false
      if (res.data?.code === 1)
        registration.value = res.data?.data
      else
        uni.showToast({ title: res.data?.msg, icon: 'none' })
    }
    catch (err) {
      uni.showToast({ title: JSON.stringify(err), icon: 'none' })
    }
  }
  else {
    uni.showToast({ title: '获取数据失败', icon: 'none' })
  }
})
</script>

<template>
  <Spacer height="30" />
  <view class="flex items-center">
    <image class="h-92rpx w-92rpx" src="@/static/images/registrationDetail/checkmark_circle.png" />
    <Spacer width="24" />
    <view class="text-36rpx text-#333333 font-medium leading-50rpx">
      已报名
    </view>
  </view>
  <Spacer height="20" />
  <RecordItem
    :picture="registration?.images!"
    :title="registration?.title || '未知标题'"
    :org="registration?.place || '未知'"
    :created-at="registration?.start_time || '未知时间'"
  />
  <Spacer height="20" />
  <view class="rounded-20rpx bg-white px-25rpx py-20rpx card-shadow">
    <view class="text-28rpx text-#333333 font-medium leading-40rpx">
      报名人信息
    </view>
    <Spacer height="10" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        姓名
      </view>
      <view class="text-#919191">
        {{ registration?.username || '未知姓名' }}
      </view>
    </view>
    <Divider width="650" />
    <view class="flex items-center justify-between py-30rpx text-30rpx leading-42rpx">
      <view class="text-#333333">
        手机号
      </view>
      <view class="text-#919191">
        {{ registration?.mobile || '未知手机号' }}
      </view>
    </view>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'registrationDetail'
style:
  navigationBarTitleText: '报名详情'
</route>
